// static/script.js

// --- DOM 元素引用 ---
const moduleSelect = document.getElementById('moduleSelect');
const keyInput = document.getElementById('keyInput');
const valueInput = document.getElementById('valueInput');
const messageDiv = document.getElementById('message');
const queryResultDiv = document.getElementById('queryResult');
const currentModuleDisplay = document.getElementById('currentModuleDisplay');
const toggleAllDataBtn = document.getElementById('toggleAllDataBtn'); // 新增：控制按钮
const allDataSection = document.getElementById('allDataSection');     // 新增：包含表格的区域
const dataTableBody = document.querySelector('#dataTable tbody');    // 新增：表格内容区域
const allDataModuleTitle = document.getElementById('allDataModuleTitle'); // 新增：表格标题中的模块名

// --- 全局变量 ---
let currentModule = moduleSelect.value;

// --- 函数定义 ---

/**
 * 更新当前模块显示名称，并重置“全部数据”区域
 */
function updateModuleDisplay() {
    currentModule = moduleSelect.value;
    const currentModuleName = moduleSelect.options[moduleSelect.selectedIndex].text;
    currentModuleDisplay.textContent = currentModuleName;
    // 切换模块时，隐藏全部数据区域并重置按钮文字
    allDataSection.style.display = 'none';
    toggleAllDataBtn.textContent = '显示全部数据';
    dataTableBody.innerHTML = ''; // 清空旧表格内容
}

/**
 * 显示消息
 * @param {string} text 消息内容
 * @param {string} type 消息类型 ('success', 'error', 'info')
 */
function showMessage(text, type = 'success') {
    messageDiv.textContent = text;
    messageDiv.className = type;
}

/**
 * 清除输入框、消息和查询结果
 */
function clearAll() {
    keyInput.value = '';
    valueInput.value = '';
    messageDiv.textContent = '';
    messageDiv.className = '';
    queryResultDiv.textContent = '';
    queryResultDiv.className = '';
    // 注意：这里不清空表格区域，显隐由按钮控制
}


/**
 * 填充全部数据表格
 * @param {object} data - 从后端获取的模块数据对象
 */
function populateDataTable(data) {
    dataTableBody.innerHTML = ''; // 清空现有内容
    allDataModuleTitle.textContent = moduleSelect.options[moduleSelect.selectedIndex].text; // 更新表格标题中的模块名

    let hasData = false;
    for (const key in data) {
        if (data.hasOwnProperty(key)) {
            hasData = true;
            const value = data[key];
            const row = dataTableBody.insertRow();

            const cellKey = row.insertCell();
            cellKey.textContent = key;

            const cellValue = row.insertCell();
            cellValue.textContent = value;

            const cellActions = row.insertCell();
            cellActions.classList.add('actions');

            // 添加“载入”按钮 (表格内)
            const loadButton = document.createElement('button');
            loadButton.textContent = '载入';
            loadButton.onclick = () => {
                keyInput.value = key;
                valueInput.value = value;
                // 载入后可以滚动到页面顶部方便操作
                window.scrollTo({ top: 0, behavior: 'smooth' });
            };
            cellActions.appendChild(loadButton);

            // 添加“删除”按钮 (表格内)
            const deleteButton = document.createElement('button');
            deleteButton.textContent = '删除';
            deleteButton.classList.add('delete');
            deleteButton.onclick = () => {
                // 填充 key 输入框，确认后调用全局删除函数
                keyInput.value = key;
                valueInput.value = value; // 也填充 value，方便用户看到删的是哪个
                 // 确认删除
                if (confirm(`确定要删除模块 '${currentModuleDisplay.textContent}' 中的键 '${key}' 吗？`)) {
                    // 调用顶部的删除函数，但不依赖输入框的内容
                    deleteDataByKey(key); // 需要一个新的函数或修改 deleteData
                }
            };
            cellActions.appendChild(deleteButton);
        }
    }
    if (!hasData) {
         const row = dataTableBody.insertRow();
         const cell = row.insertCell();
         cell.colSpan = 3;
         cell.textContent = '该模块暂无数据';
         cell.style.textAlign = 'center';
     }
}


/**
 * 控制“全部数据”区域的显示/隐藏及数据加载
 */
async function toggleAllDataVisibility() {
    if (allDataSection.style.display === 'none') {
        // 当前是隐藏状态，需要显示并加载数据
        showMessage('正在加载全部数据...', 'info'); // 显示加载提示
        try {
            const response = await fetch(`/api/${currentModule}/all`);
            if (!response.ok) {
                const errorData = await response.json();
                throw new Error(errorData.error || `获取数据失败: ${response.status}`);
            }
            const data = await response.json();
            populateDataTable(data); // 使用获取的数据填充表格
            allDataSection.style.display = 'block'; // 显示区域
            toggleAllDataBtn.textContent = '隐藏全部数据'; // 更新按钮文字
            showMessage('全部数据加载完成。', 'success'); // 清除加载提示，显示成功
        } catch (error) {
            showMessage(`加载全部数据失败: ${error.message}`, 'error');
            console.error('获取全部数据时出错:', error);
            allDataSection.style.display = 'none'; // 出错时保持隐藏
            toggleAllDataBtn.textContent = '显示全部数据'; // 重置按钮文字
        }
    } else {
        // 当前是显示状态，需要隐藏
        allDataSection.style.display = 'none';
        toggleAllDataBtn.textContent = '显示全部数据';
        dataTableBody.innerHTML = ''; // 清空表格内容
        showMessage('全部数据已隐藏。', 'info');
    }
}


// --- CRUD 操作函数 ---

// 查询数据 (基本不变)
async function queryData() {
    const key = keyInput.value.trim();
    if (!key) {
        showMessage("请输入要查询的键 (Key)", 'error');
        queryResultDiv.textContent = '';
        queryResultDiv.className = '';
        return;
    }
    queryResultDiv.textContent = '';
    queryResultDiv.className = '';
    showMessage('', '');

    try {
        const response = await fetch(`/api/${currentModule}/${encodeURIComponent(key)}`);
        const result = await response.json();
        if (!response.ok) throw new Error(result.error || `查询失败: ${response.status}`);

        const resultKey = Object.keys(result)[0];
        const resultValue = result[resultKey];
        queryResultDiv.textContent = `${resultKey}查询结果为:  ${resultValue}`;
        queryResultDiv.className = 'info';
        valueInput.value = resultValue;
        showMessage(`查询成功: '${key}' 的数据已显示。`, 'success');
    } catch (error) {
        showMessage(`查询失败: ${error.message}`, 'error');
        queryResultDiv.textContent = '查询失败或未找到数据。';
        queryResultDiv.className = 'error';
        console.error('查询时出错:', error);
    }
}

// 添加数据 (基本不变)
async function addData() {
    const key = keyInput.value.trim();
    const value = valueInput.value.trim();
    if (!key || !value) {
        showMessage("键 (Key) 和 值 (Value) 都不能为空", 'error'); return;
    }
    showMessage('', '');

    try {
        const response = await fetch(`/api/${currentModule}`, {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ key: key, value: value }),
        });
        const result = await response.json();
        if (!response.ok) {
             if (response.status === 409) { showMessage(result.error || '添加失败: 键已存在', 'error'); }
             else { throw new Error(result.error || `添加失败: ${response.status}`); }
        } else {
             showMessage(result.success || "添加成功!", 'success');
             valueInput.value = '';
             // 如果表格当前可见，可以考虑刷新它（可选）
             // if (allDataSection.style.display === 'block') {
             //     toggleAllDataVisibility(); // 隐藏再显示以刷新
             //     setTimeout(toggleAllDataVisibility, 100); // 立即再次调用以显示
             // }
        }
    } catch (error) {
        showMessage(`添加失败: ${error.message}`, 'error'); console.error('添加时出错:', error);
    }
}

// 修改数据 (基本不变)
async function updateData() {
    const key = keyInput.value.trim();
    const value = valueInput.value.trim();
    if (!key || !value) {
        showMessage("请确保要修改的键 (Key) 和新的值 (Value) 均已输入", 'error'); return;
    }
    showMessage('', '');

    try {
        const response = await fetch(`/api/${currentModule}/${encodeURIComponent(key)}`, {
            method: 'PUT', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ value: value }), // 仅发送 value
        });
        const result = await response.json();
        if (!response.ok) {
             if (response.status === 409) { showMessage(result.error || '修改失败: 键冲突', 'error'); }
             else { throw new Error(result.error || `修改失败: ${response.status}`);}
        } else {
            showMessage(result.success || "修改成功!", 'success');
            // 考虑刷新可见表格（可选）
        }
    } catch (error) {
        showMessage(`修改失败: ${error.message}`, 'error'); console.error('修改时出错:', error);
    }
}


// 删除数据（处理来自主按钮的删除）
async function deleteData() {
    const key = keyInput.value.trim();
    if (!key) {
        showMessage("请输入要删除的键 (Key)", 'error');
        return;
    }
    // 确认删除
    if (!confirm(`确定要删除模块 '${currentModuleDisplay.textContent}' 中的键 '${key}' 吗？`)) {
        return;
    }
    await deleteDataByKey(key); // 调用通用删除逻辑
}

// 通用删除逻辑（供主按钮和表格内按钮调用）
async function deleteDataByKey(keyToDelete) {
     if (!keyToDelete) return; // 防止空 key

     showMessage('', '');
     queryResultDiv.textContent = '';
     queryResultDiv.className = '';

     try {
        const response = await fetch(`/api/${currentModule}/${encodeURIComponent(keyToDelete)}`, {
            method: 'DELETE',
        });
        const result = await response.json();
        if (!response.ok) { throw new Error(result.error || `删除失败: ${response.status}`); }

        showMessage(result.success || "删除成功!", 'success');
        // 如果删除的是当前输入框中的 key，则清空输入框
        if (keyInput.value === keyToDelete) {
            keyInput.value = '';
            valueInput.value = '';
        }
        // 如果表格当前可见，刷新表格
         if (allDataSection.style.display === 'block') {
             // 简单刷新：隐藏再立即请求显示
             allDataSection.style.display = 'none'; // 先隐藏
             toggleAllDataBtn.textContent = '显示全部数据'; // 重置按钮文本
             await toggleAllDataVisibility(); // 重新请求并显示
         }

    } catch (error) {
        showMessage(`删除失败: ${error.message}`, 'error');
        console.error('删除时出错:', error);
    }
}


// --- 事件监听 ---

// 模块选择变化
moduleSelect.addEventListener('change', () => {
    updateModuleDisplay();
    clearAll();
});

// 页面加载完成
document.addEventListener('DOMContentLoaded', () => {
    updateModuleDisplay();
});